<!--
 * @Description: 查看
 * @Author: Liu Zhiwang
 * @Date: 2021-04-13 17:05:40
 * @LastEditTime: 2021-07-14 17:09:13
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div>
    <base-dialog
      width="60%"
      class="dialog_box"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      :show-default-footer="false"
      @open="beforeOpenDialog"
    >
      <div>
        <table id="look-data">
          <tbody v-for="(item, key) in dialog.data" :key="key">
            <tr v-if="item.type ==='text'">
              <td>{{ item.column1 }}</td>
              <td>{{ item.column2 }}</td>
              <td>{{ item.column3 }}</td>
              <td>{{ item.column4 }}</td>
              <td>{{ item.column5 }}</td>
              <td>{{ item.column6 }}</td>
            </tr>
            <tr v-if="item.type ==='textarea'">
              <td>{{ item.column1 }}</td>
              <td v-if="item.column2" colspan="5">{{ item.column2 }}</td>
              <td v-else colspan="5">无</td>
            </tr>
          </tbody>
          <tr>
            <td colspan="6" class="file-box">
              <div>附件</div>
              <UploadFile v-if="dialog.visible && dialog.form.imagesList && dialog.form.imagesList.length" ref="upload" :model="fileModal" />
              <span v-else>无</span>
            </td>
          </tr>
        </table>
      </div>
    </base-dialog>
  </div>
</template>
<script>
import UploadFile from '@/views/jjxt/components/UploadFile';
export default {
  components: { UploadFile },
  props: {
    dialog: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      fileModal: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: false,
        uploadType: 'img'
      }
    };
  },
  watch: {
    'dialog.visible'() {
      if (this.dialog.visible) {
        // 附件
        var tempArr = [];
        this.dialog.form.imagesList.forEach(item => {
          tempArr.push(item.filePath);
        });
        this.showFile(tempArr, 1, 0, 0, true, this.dialog.form.imagesList);
      }
    }
  },
  methods: {
    // 显示附件
    showFile(pathList, type, key, index, isDetail, fileList) {
      this.fileModal = {
        title: '',
        visible: true,
        pathList: pathList,
        fileList: fileList,
        type,
        bizType: '1',
        key,
        index,
        isDetail: isDetail,
        uploadType: 'file'
      };
    },
    beforeOpenDialog() {
      this.$nextTick(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
#look-data {
  border-collapse: collapse;
  width: 100%;
}
#look-data td, #look-data th {
  border: 1px solid #DFE6EC;
  font-size: 16px;
  line-height: 1.5;
  padding: 8px 0;
}
#look-data tr td:nth-child(odd){
  width: 15%;
  max-width: 20px;
  padding-left: 20px;
  padding-right: 26px;
  text-align: right;
  background: #E9F2FC;
}
#look-data tr td:nth-child(even){
  width: 20%;
  padding-left: 20px;
  padding-right: 20px;
}
.dialog_box #look-data tr td.file-box {
  width: 100%;
  text-align: left;
  background: #ffffff;
}
#look-data .file-content {
  min-height: 187px;
}
</style>
